<template>
	<div class="hotel-order">
		<el-form
			ref="form"
			:inline="true"
			:model="form"
			class="search-form"
		>
			<el-form-item label="酒店ID:">
				<el-input
					v-model="form.hotel_id"
					size="small"
					placeholder="请输入酒店ID"
				></el-input>
			</el-form-item>
			<el-form-item label="时间:">
				<el-date-picker
					v-model="date"
					size="small"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					:clearable="false"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button
					size="small"
					type="primary"
					@click="search(1)"
				>查询
				</el-button>
			</el-form-item>
		</el-form>

		<el-table
			:data="tableData"
			style="width: 100%"
			v-loading="loading"
		>
			<el-table-column
				prop="id"
				label="订单ID"
				width="75"
			>
			</el-table-column>
			<el-table-column
				prop="start"
				label="出发点"
				show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
				prop="end"
				label="目的地"
				show-overflow-tooltip
			>
			</el-table-column>
			<el-table-column
				prop="name"
				label="客户姓名"
			>
			</el-table-column>
			<el-table-column
				prop="phone"
				label="客户手机号"
				width="120px"
			>
			</el-table-column>
			<el-table-column
				prop="driver"
				label="司机姓名"
			>
			</el-table-column>
			<el-table-column
				prop="money"
				label="订单金额"
				width="80"
			>
			</el-table-column>
			<el-table-column
				prop="create_time"
				label="创建时间"
				width="180px"
			>
			</el-table-column>
			<el-table-column
				prop="state"
				label="订单状态"
			>
				<template slot-scope="prop">
					<span>{{prop.row.state | computedState}}</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				background
				layout="total, prev, pager, next, jumper"
				:page-size.sync="form.size"
				:current-page.sync="form.page"
				:total="total"
				:hide-on-single-page="true"
				@current-change="search"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
  import dayjs from 'dayjs'
  import {pageSize} from "../../constant";

  export default {
    name: "order"
    , data() {
      return {
        form: {
          page: 1,
          size: pageSize,
          hotel_id: '',
          time_begin: '',
          time_end: ''
        },
        total: 0,
        loading: false,
        tableData: [],
        date: [
          dayjs().subtract(1, 'months').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
      }
    }
    , watch: {
      date: {
        deep: true,
        immediate: true,
        handler(date) {
          let time_begin = '',
            time_end = ''
          if (date) {
            [time_begin, time_end] = date
          }
          this.form.time_begin = time_begin
          this.form.time_end = time_end
        }
      }
    }
    , mounted() {
      let query = this.$route.query
      this.form.hotel_id = query.id || ''
      this.search(1)
      this.$bus.$on('hotel-init', () => {
        this.getList()
      })
    }
    , filters: {
      computedState(state) {
        switch (state) {
          case 1:
            return '未接单'
          case 2:
            return '已接单'
          case 4:
            return '完成'
        }
      }
    }
    , methods: {
      search(page) {
        this.form.page = page
        this.getList()
      }
      , getList() {
        this.loading = true
        this.$axios.get('/api/v1/hotel/orders', {
            params: this.form
          })
          .then(res => {
            let {total = 0, data = []} = res
            this.total = total
            this.tableData = data
          })
          .catch(() => {

          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>

</style>